<template>
  <div class="" style="height: 100%; font-size: 12px">
    <div style="height: 100%; display: flex; flex-direction: column">
      <div class="dth" style="width: 100%; color: white">
        <div v-for="eh in header" :style="{ flex: eh.flex }" class="tbhcol">
          <div>
            <div
              v-html="eh.name"
              :class="{
                tbhrowsingle: eh.children && eh.children.length ? true : false,
                fwwccwh: true,
              }"
              :style="{
                padding: colpa,
              }"
            ></div>
          </div>
          <div v-if="eh.children && eh.children.length">
            <div class="tbhrow">
              <div
                v-for="ehi in eh.children"
                class="fwwccwh"
                :style="{
                  padding: colpa,
                }"
              >
                <div v-html="ehi.name"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100%; position: relative">
        <div style="height: 100%; position: absolute" :id="smid"></div>

        <vue-seamless-scroll
          :data="datalist"
          :style="{ height: smh, overflow: 'hidden' }"
          v-if="ifsm"
          class="smdiv"
          :class-option="optionSingleHeightTime"
        >
          <div
            v-for="(item, index) in datalist"
            :style="{
              display: 'flex',
              width: '100%',
              backgroundColor: index % 2 == 0 ? '#1E233C99' : '#040A2099',
            }"
          >
            <div
              v-for="(er, index) in item"
              :style="{ flex: index == 0 ? 20 : 10, padding: '5px' }"
              class="smrc fwwccwh"
              id="smrcid"
            >
              <div v-html="er"></div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamless from "vue-seamless-scroll";
import uuidv1 from "uuid/v1";

import data from "./data";

export default {
  name: "",
  props: {
    header: {
      type: Array,
      default: [],
    },
    datalist: {
      type: Array,
      default: [],
    },
  },
  components: {},
  created() {
    this.smid = _.random(1, 20) + "aaa";
  },
  data() {
    return {
      smid: "",
      smh: "100px",
      ifsm: true,
      colpa: "10px 0px",
      smrcidh: 20,
    };
  },
  computed: {
    optionSingleHeightTime() {
      return {
        // singleHeight: this.smrcidh,
        // waitTime: 2500,
        step: 0.05
      };
    },
  },
  watch: {},
  mounted() {
    //设置高度
    this.$nextTick(function () {
      let aaa = document.getElementById(this.smid);
      this.smh = aaa.offsetHeight + "px";
      this.ifsm = false;
      this.$nextTick(function () {
        this.ifsm = true;
        this.$nextTick(function () {
          let aaaa = document.getElementById(this.smrcid);
          this.smrcidh = aaaa.offsetHeight;
        });
      });
    });
  },
  methods: {
    getflex() {
      return function (index) {
        let aaa = [];
        this.header.map((item) => {
          if (item.children && item.children.length) {
            item.children.map((itemt) => {
              aaa.push(itemt.flex);
            });
          } else {
            aaa.push(item.flex);
          }
        });

        console.log(aaa);

        return aaa[index];
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.smrc {
}
.smdiv {
  position: absolute;
  width: 100%;
}
.dth {
  display: flex;
  width: 100%;
  background-color: #11183c99;
  .tbhcol {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    .tbhcolpa {
      // padding: ;
    }

    .tbhrowsingle {
      border-left: 1px solid #373d5b;
    }

    .tbhrow {
      display: flex;
      flex-direction: row;
      border-top: 1px solid #373d5b;
      border-left: 1px solid #373d5b;
    }
  }
}
</style>